// src/app/(protected)/admin/page.tsx
'use client';
import React from 'react';
import {currentRole} from "@/lib/auth";
import {useCurrentRole} from "@/hooks/use-current-role";
import {Card, CardContent, CardHeader} from "@/components/ui/card";
import RoleGate from "@/components/auth/role-gate";
import {UserRole} from "@/lib/types";
import FormSuccess from "@/components/form-success";
import {Button} from "@/components/ui/button";
import {toast} from "sonner";
import {admin} from "@/actions/admin";

// const Page =async () => {
//     const role = await currentRole()
//
//     return (
//         <div>
//             {role}
//         </div>
//     );
// };

const Page = () => {
    const onServerActionClick = () => {
        admin()
            .then((data) => {
                if (data.error) {
                    toast.error(data.error)
                }
                if (data.success) {
                    toast.success(data.success)
                }
            })
    }

    // const role = useCurrentRole()
    const onApiRouteClick = () => {
        fetch('/api/admin')
            .then((res) => {
                if (res.ok) {
                    toast.success('Allowed API Route!')
                } else {
                    toast.error('Forbidden API Route!')
                }
            })
    }

    return (
        <Card className="w-[600px]">
            <CardHeader>
                <p className={`text-2xl font-semibold text-center`}>
                    Admin
                </p>
            </CardHeader>
            <CardContent className={`space-y-4`}>
                <RoleGate allowedRole={UserRole.ADMIN}>
                    <FormSuccess
                        message={`You are allowed to see this content!`}
                    />
                </RoleGate>
                {/*测试仅管理员可用的操作*/}
                <div className={`flex flex-row items-center justify-between
                rounded-lg border p-3 shadow-md`}>
                    <p className={`text-sm font-medium`}>
                        Admin-only API Route
                    </p>
                    <Button onClick={onApiRouteClick}>
                        Click to test
                    </Button>
                </div>
                <div className={`flex flex-row items-center justify-between
                rounded-lg border p-3 shadow-md`}>
                    <p className={`text-sm font-medium`}>
                        Admin-only Server Action
                    </p>
                    <Button onClick={onServerActionClick}>
                        Click to test
                    </Button>
                </div>
            </CardContent>
        </Card>
    );
};

export default Page;